<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息展示</title>
    <script language="javascript" type="text/javascript" src="../vue/vue2.x.js"></script>
    <script language="javascript" type="text/javascript" src="../elementUI/elementUI2.x.js"></script>
    <!--        <link rel="stylesheet" href="elementUI/elementUI2.x.css" type="text/css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .el-dialog .el-rate {
            line-height: 40px;
            height: 40px !important;
        }

        .el-dialog .el-upload.el-upload--text {
            width: 60px;
            height: 60px;
            border: 1px solid #DCDFE6;
            border-radius: 50%;
        }

        .el-dialog .el-upload.el-upload--text .el-icon-plus.avatar-uploader-icon {
            font-size: 40px;
            color: #DCDFE6;
            margin: 10px 0;
        }
        #selectForm{
            display: inline-block;
        }
        #selectForm .el-form-item.el-form-item--feedback{
            display: inline-block;
            width: 300px;
        }
        #selectForm .el-form-item__label{
            width: 80px!important;
        }
        #selectForm .el-form-item__content{
            margin-left: 80px!important;
        }
        #app{
            position: relative;
        }
        #addBtn{
            position: absolute;
            right: 110px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form id="selectForm" :model="selectData" status-icon ref="selectData" label-width="100px">
        <el-form-item label="账号">
            <el-input v-model="selectData.userMail" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名">
            <el-input v-model="selectData.userName" clearable></el-input>
        </el-form-item>
        <el-button type="success" plain @click="searchBtn">查询</el-button>
    </el-form>
    <el-button id="addBtn" type="primary" plain @click="dialogFormVisible=true;clearRowData();">添加用户</el-button>
    <el-button id="exportExcel" type="primary" plain @click="exportExcel">导出数据</el-button>
    <el-table
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            stripe
            style="width: 100%">
        <el-table-column
                label="头像"
                width="60px">
            <template slot-scope="scope">
                <img style="width:50px;height:50px;border-radius: 50%" :src="'../'+scope.row.user_img">
            </template>
        </el-table-column>
        <el-table-column
                prop="user_mail"
                label="账号"
                width="200px">
        </el-table-column>
        <el-table-column
                prop="user_name"
                label="用户昵称"
                width="150px">
        </el-table-column>
        <el-table-column
                label="用户信誉度"
                width="150px">
            <template slot-scope="scope">
                <el-rate
                        disabled
                        :value="scope.row.user_reputation"
                        :colors="colors">
                </el-rate>
            </template>
        </el-table-column>
        <el-table-column
                width="100px"
                prop="user_pwd"
                label="用户密码">
        </el-table-column>
        <el-table-column
                width="100px"
                prop="user_birthday"
                label="生日">
        </el-table-column>
        <el-table-column
                width="200px"
                prop="id_card"
                label="身份证号">
        </el-table-column>
        <el-table-column
                prop="user_sex"
                label="性别"
                width="60px">
        </el-table-column>
        <el-table-column
                width="200px"
                prop="rand_card"
                label="银行卡号">
        </el-table-column>
        <el-table-column
                prop="role_name"
                label="角色"
                width="60px">
        </el-table-column>
        <el-table-column
                prop="user_state"
                label="用户状态"
                width="100px">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200px">
            <template slot-scope="scope">
                <el-button type="warning" plain
                           @click="rowData=scope.row;dialogFormVisible=true;rowData.user_img='../'+rowData.user_img">修改
                </el-button>
                <el-popconfirm
                        title="确定删除吗？"
                        @confirm="delInfo(scope.row.user_id)">
                    <el-button slot="reference" type="danger" plain>删除</el-button>
                </el-popconfirm>
                <!--                <el-button type="danger" plain @click="delInfo(scope.row.user_id)">删除</el-button>-->
            </template>
        </el-table-column>
    </el-table>

    <!--    修改信息弹出框-->
    <el-dialog title="用户信息更新" :visible.sync="dialogFormVisible" fullscreen @close="cancelBtn">
        <el-form :model="rowData">
            <el-form-item label="头像" label-width="100px">
                <el-upload
                        class="avatar-uploader"
                        action=""
                        :auto-upload="false"
                        :show-file-list="false"
                        :on-change="imgFileChange">
                    <img v-if="rowData.user_img" style="width:60px;height:60px;border-radius: 50%"
                         :src="rowData.user_img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="用户账号" label-width="100px">
                <el-input v-model="rowData.user_mail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" label-width="100px">
                <el-input v-model="rowData.user_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" label-width="100px">
                <el-input v-model="rowData.user_pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" label-width="100px" required>
                <el-col :span="11">
                    <el-form-item>
                        <el-date-picker
                                name="user_birthday"
                                v-model="rowData.user_birthday"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="性别" label-width="100px">
                <el-select style="width:150px" v-model="rowData.user_sex">
                    <el-option
                            v-for="i in options"
                            :key="i.value"
                            :label="i.label"
                            :value="i.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="身份证号" label-width="100px">
                <el-input name="id_card" v-model="rowData.id_card"></el-input>
            </el-form-item>
            <el-form-item label="银行卡号" label-width="100px">
                <el-input name="rand_card" v-model="rowData.rand_card"></el-input>
            </el-form-item>
            <el-form-item label="角色" label-width="100px">
                <!--                <el-input name="role_id" v-model="rowData.role_id"></el-input>-->
                <el-select style="width:150px" v-model="rowData.role_id">
                    <el-option
                            v-for="i in role_options"
                            :key="i.value"
                            :label="i.label"
                            :value="i.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" label-width="100px">
                <!--                <el-input name="user_state" v-model="rowData.user_state"></el-input>-->
                <el-select style="width:150px" v-model="rowData.user_state">
                    <el-option
                            v-for="i in state_options"
                            :key="i.value"
                            :label="i.label"
                            :value="i.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="信誉度" label-width="100px">
                <el-rate
                        v-model="rowData.user_reputation"
                        :colors="colors">
                </el-rate>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="updateUserInfo">确 定</el-button>
        </div>
    </el-dialog>

<!--    element ui分页-->
    <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            :current-page="currentPage"
            style="position: fixed;bottom: 10px;left: 50%;transform: translateX(-50%);">
    </el-pagination>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            tableData: [],//所有数据
            currentPage: 1, //初始页
            pageSize: 5,    //每页的数据
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            dialogFormVisible: false,
            //模糊查询表单
            selectData: {
                userMail: '',
                userName: ''
            },
            rowData: {
                user_id: null,
                user_img: '',
                user_mail: '',
                user_pwd: '',
                user_name: '',
                user_birthday: '',
                id_card: '',
                user_sex: '',
                rand_card: '',
                role_id: null,
                user_state: null,
                user_reputation: null
            },   //一行数据，代表用一个用户
            userImgFile: null, //用户头像文件
            options: [{
                value: "男",
                label: '男'
            }, {
                value: "女",
                label: '女'
            }],
            role_options: [{
                value: 1,
                label: '管理员'
            }, {
                value: 3,
                label: '普通用户'
            }],
            state_options: [{
                value: 0,
                label: '未激活'
            }, {
                value: 1,
                label: '已激活'
            }, {
                value: 2,
                label: '注销锁定'
            }]
        },
        mounted: function () {
            axios.get("/admin/getUserInfo").then((resp) => {
                console.log(resp.data);
                this.currentPage = Number(window.sessionStorage.getItem("currentPage")) || 1;
                this.tableData = resp.data;
            }).catch((error) => {
                vm.$message({
                    type: 'error',
                    message: '服务器开小差了~~~'
                })
            })
        },
        methods: {
            //分页  修改当前页码
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                window.sessionStorage.setItem("currentPage", currentPage);
                console.log(this.currentPage)  //点击第几页
            },
            //删除用户
            delInfo: function (userId) {
                console.log(userId);
                window.sessionStorage.setItem("currentPage", this.currentPage);
                console.log(window.sessionStorage.getItem("currentPage"))
                var formData = new FormData();
                formData.append("user_id", userId);
                axios.post("/admin/delUserInfo", formData).then((resp) => {
                    if (resp.data == true) {
                        vm.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000)
                    } else {
                        vm.$message({
                            type: 'error',
                            message: '服务器开小差了~~~'
                        })
                    }
                }).catch((error) => {
                    vm.$message({
                        type: 'error',
                        message: '服务器开小差了~~~'
                    })
                })
            },
            //头像上传
            imgFileChange(file) {
                this.rowData.user_img = URL.createObjectURL(file.raw);
                this.userImgFile = file.raw;
            },
            //更新用户信息
            updateUserInfo: function () {
                console.dir(this.rowData);
                var formData = new FormData();
                formData.append("user_id", this.rowData.user_id);
                formData.append("user_img", this.rowData.user_img);
                formData.append("user_mail", this.rowData.user_mail);
                formData.append("user_pwd", this.rowData.user_pwd);
                formData.append("user_name", this.rowData.user_name);
                formData.append("user_birthday", this.rowData.user_birthday);
                formData.append("id_card", this.rowData.id_card);
                formData.append("user_sex", this.rowData.user_sex);
                formData.append("rand_card", this.rowData.rand_card);
                formData.append("role_id", this.rowData.role_id);
                formData.append("user_state", this.rowData.user_state);
                formData.append("user_reputation", this.rowData.user_reputation);
                formData.append("imgFile", this.userImgFile)
                axios.post("/admin/updateUserInfo", formData).then((resp) => {
                    if (resp.data == true) {
                        vm.$message({
                            type: 'success',
                            message: '更新成功'
                        })
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000)
                    } else {
                        vm.$message({
                            type: 'error',
                            message: '服务器开小差了~~~'
                        })
                    }
                }).catch((error) => {
                    vm.$message({
                        type: 'error',
                        message: '服务器开小差了~~~'
                    })
                })
            },
            //取消按钮
            cancelBtn: function () {
                this.dialogFormVisible = false;
                window.location.reload();
            },
            //用于添加用户  清空rowData
            clearRowData: function () {
                for (const key in this.rowData) {
                    this.rowData[key] = null;
                }
                //初始化数据
                this.rowData.user_id = -1;
                this.rowData.user_sex = "男";
                this.rowData.role_id = 3;
                this.rowData.user_state = 0;
            },
            //模糊查询
            searchBtn:function() {
                if (this.selectData.userName == "" && this.selectData.userMail == "") {
                    axios.get("/admin/getUserInfo").then((resp) => {
                        console.log(resp.data);
                        this.currentPage = Number(window.sessionStorage.getItem("currentPage")) || 1;
                        this.tableData = resp.data;
                    }).catch((error) => {
                        vm.$message({
                            type: 'error',
                            message: '服务器开小差了~~~'
                        })
                    })
                } else {
                    var formData = new FormData();
                    formData.append("user_mail", this.selectData.userMail);
                    formData.append("user_name", this.selectData.userName);
                    axios.post("/admin/searchUserInfo", formData).then((resp) => {
                        console.log(resp.data);
                        this.currentPage = Number(window.sessionStorage.getItem("currentPage")) || 1;
                        this.tableData = resp.data;
                    }).catch((error) => {
                        vm.$message({
                            type: 'error',
                            message: '服务器开小差了~~~'
                        })
                    })
                }
            },
            //导出excel数据
            exportExcel:function() {
                window.location.href="/admin/exportExcel";
                vm.$message({
                    type: 'success',
                    message: '导出成功'
                })
            }

        }
    })
</script>
</body>
</html>
